<template>
	<view class="memory-island-detail">
		<view class="top-background" :style="'background-image: url('+islandInfo.background+');'">
			<view class="mask"></view>
		</view>

		<view class="info">
			<view class="back-arrow"  :style="{'padding-top': paddingTop}">
				<uni-icons @click="toBackPage" style="margin-left: 30rpx;" type="left" size="30" color="#ffffff">
				</uni-icons>
				<view style="display: flex;flex-direction: row;">
					<uni-icons style="margin-right: 40rpx;" @click="toShareIsland" type="more-filled" size="30" color="#ffffff">
					</uni-icons>
				</view>
			</view>

			<view class="name">
				{{islandInfo.name}}
			</view>
			<view class="description">
				{{islandInfo.description}}
			</view>
			<view class="description">
				共 {{postPage.total}} 条
			</view>
			<view class="posts" style="min-height: 1200rpx;">
				<view class="tabs">
					<view v-for="(item,index) in postTypes" :key="item">
						<view @click="changeTab(index)" class="tab"
							:class="index == postPage.visibility ? 'tab-current': '' "
							:style="{color: index == postPage.visibility ? islandInfo.theme : 'gray'}">
							<view>{{item}}</view>
							<view v-if="index == postPage.visibility" class="tab-line" :style="{background: islandInfo.theme}"></view>
						</view>
					</view>
				</view>


				<view style="width: 700rpx;margin-left: 30rpx;">
					<time-line v-if="postPage.visibility == 0" :themeColor="islandInfo.theme" :isFench="isFench" :fenchData="fenchData" ref="timeline" location="left"></time-line>
					<time-line v-if="postPage.visibility == 1" :themeColor="islandInfo.theme" :isFench="isFench" :fenchData="fenchData" ref="timeline" location="left"></time-line>
					<time-line v-if="postPage.visibility == 2" :themeColor="islandInfo.theme" :isFench="isFench" :fenchData="fenchData" ref="timeline" location="left"></time-line>
				</view>
			</view>
		</view>
		
		<view class="add-button"  :style="{'background-color': islandInfo.theme }">
			<uni-icons @click="toAddMemory" type="plusempty" size="30" color="#FFFFFF">
			</uni-icons>
		</view>
	</view>
</template>

<script>
	import timeLine from '@/components/time-line.vue'
	export default {
		components:{timeLine},
		data() {
			return {
				time: 0,
				isclick: true,

				islandInfo: {},


				postTypes: ["自我", "关注", "时空"],

				postPage:{
					pageNow:1,
					pageSize:20,
					total:100,
					visibility:0
				},
				// 分页请求是否完毕
				isFench:0,
				// 主题色配置
				// 当前页的数据
				fenchData: [],


				paddingTop:null
			}
		},
		onPageScroll() {
			if (this.isclick) {
				this.timer();
				this.$refs.timeline.getScroll();
			}
		},
		onLoad(options) {
			this.islandInfo.id = options.islandId
			this.getIslandInfo()
			this.pagePost()


			// 调整搜索位置
			// #ifdef MP-WEIXIN
			// 1.获取屏幕可使用宽度
			let windowWidth = uni.getSystemInfoSync().windowWidth;
			// 3.获取胶囊按钮位置信息
			const menuButton = uni.getMenuButtonBoundingClientRect();
			// // 5.导航栏与状态栏拉开距离  margin-top: statusBarTop + 'rpx';
			this.paddingTop = menuButton.top * (750 / windowWidth) + 'rpx';
			// #endif
		},
		onReachBottom() {
			console.log('reach bottom')
			if(!this.fenchComplete){
				this.isFench = 0;
				this.postPage.pageNow ++;
				this.$api.pageMemory({
					islandId:this.islandInfo.id,
					pageNow:this.postPage.pageNow,
					pageSize:this.postPage.pageSize,
					visibility:this.postPage.visibility
				}).then(res=>{
					this.fenchData = res.data.rows
				}).finally(() => {
					this.isFench = 1;
				})
			}
			// this.pagePost()
		},
		methods: {
			timer() {
				if (this.time > 0) {
					this.isclick = false;
					this.time--;
					setTimeout(this.timer, 1)
				} else {
					this.isclick = true;
					this.time = 10
				}
			},
			getIslandInfo() {
				this.$api.getIslandInfo({
					id:this.islandInfo.id
				}).then(res=>{
					this.islandInfo = res.data
				})
			},

			pagePost(){
				this.postPage.pageNow = 1
				this.isFench = 0;
				this.$api.pageMemory({
					islandId:this.islandInfo.id,
					pageNow:this.postPage.pageNow,
					pageSize:this.postPage.pageSize,
					visibility:this.postPage.visibility
				}).then(res=>{
					this.fenchData = res.data.rows
					this.postPage.total = res.data.totalPage;
				}).finally(() => {
					this.isFench = 1;
					this.pageNow ++;
				})
			},
			changeTab(index) {
				this.currentTypeIndex = index
				// 重置分页器
				this.postPage = {
					pageNow:1,
					pageSize:20,
					total:100,
					visibility:index
				}
				setTimeout(()=>{
					this.pagePost()
				})

			},
			toBackPage() {
				uni.navigateBack({
					delta: 1, //返回层数，2则上上页
				})
			},
			toAddMemory() {
				uni.navigateTo({
					url: "/pages_being/island/memory-create?islandId="+this.islandInfo.id
				})
			}
		},
		computed: {
			// 全部数据请求完毕
			fenchComplete() {
				const {
					pageNow,
					pageSize,
					total,
					visibility
				} = this.postPage
				return (pageNow+1)*pageSize >= total
			}
		}
	}
</script>

<style scoped lang="scss">
	.memory-island-detail {


		.top-background {
			position: fixed;
			z-index: 1;

			width: 100%;
			height: 480rpx;

			background-repeat: no-repeat;
			background-size: cover;


			.mask{
				height: 100%;
				width: 100%;
				position: absolute;
				top: 0;
				left: 0rpx;
				background: linear-gradient(to top, rgba(0, 0, 0, 0.5)0%, rgba(67, 72, 92, 0)100%);
				z-index: 2;
			}
		}

		.info {
			position: relative;
			z-index: 2;

			display: flex;
			flex-direction: column;

			padding-bottom: 200rpx;

			.back-arrow {
				width: 100%;
				//#ifdef MP-WEIXIN
				width: 550rpx;
				//#endif


				padding-top: 100rpx;

				// #ifdef H5
				padding-top: 40rpx;
				// #endif

				height: 40rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}


			.name {
				color: white;
				font-size: 40rpx;
				margin-top: 120rpx;
				margin-left: 40rpx;
			}

			.description {
				margin-top: 10rpx;
				margin-left: 40rpx;
				font-size: 28rpx;
				color: #e3e3e3;
			}

			.posts {
				width: 100%;
				background-color: #f9f9f9;
				border-radius: 40rpx;
				margin-top: 20rpx;


				.tabs {
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-top: 40rpx;
					margin-bottom: 20rpx;
					border-bottom: solid thin #e3e3e3;

					.tab {
						margin-left: 50rpx;
						color: gray;
						height: 65rpx;

						display: flex;
						flex-direction: column;
						justify-content: space-between;
						align-items: center;
					}

					.tab-current {
						color: #C98A8B;
						font-weight: bold;
					}

					.tab-line {
						width: 40rpx;
						height: 7rpx;
						border-radius: 5rpx;
						background-color: #C98A8B;
					}


				}

				.post {

					.picture {
						width: 600rpx;
						height: 350rpx;
						border-radius: 10rpx;
						overflow: hidden;



					}

					.date {}
				}
			}

		}
		
		.add-button{
			position: fixed;
			z-index: 4;
			bottom: 180rpx;
			right: 150rpx;
			
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			
			box-shadow: 0 0 2rpx 4rpx #f4f4f4;
			
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
		}

		
	}
</style>
